<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Hello Vue.js</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
           data() {
               return{
                   message: 'Hello vue.js ',
                   show: true,
                   type: 'D'
               }
           },
           //v-if ta的隐藏/显示切换消耗资源较高，而v-show有更高的初始渲染开销
           //因此，如果需要非常频繁的切换，应该使用v-show，如果在运行时条件很少改变，则使用v-if
               template:`
               <div v-if="type === 'A'"> A </div>
               <div v-else-if="type === 'B'"> B </div>
               <div v-else-if="type === 'C'"> C </div>
               <div v-else> Not A/B/C </div>
               <div v-show="show">v-show {{message}}</div>
               `
            }).mount("#app");
    </script>
</html>





